深夜 12 點，我盯著電腦螢幕，手放在鍵盤上整整發呆了十分鐘......

Vibe Coding 應該事件很開心、很隨性的事，只要跟 AI 聊天就能把想法變出來。

但當我真的準備從 0 到 1 開發 3D Tutting 模擬器時，才發現第一個大難關根本不是數學，而是我完全不知道第一句 Prompt 該怎麼跟 AI 開口啊!!!!!!

預期很美好，現實直接打臉

我的第一步嘗試，直接對著 AI 下prompt：「請幫寫一個 3D Tutting 模擬器。」
結果 AI 也很乾脆，直接吐了一大串幾百行的程式碼給我。我開心地複製貼上、開啟瀏覽器，結果跟我跟我想像的不太一樣！

那一刻我才明白：Vibe Coding 不是把問題丟給 AI 就算了，而是你要學會怎麼跟它「搭檔拆解問題」。

先別想「做什麼」，先與AI聊天尋找起手式

prompt到底要怎麼下呢? 最簡單最暴力的方法就是下這一句【tutting模擬器 Vibe Coding 起手式】，接著就能得許多建議，AI給我的其中一個回覆如下：

「幫我做一個網頁版的 tutting 模擬器。畫面上有一雙用簡單幾何圖形(方塊、線條)組成的手臂/手掌，可以透過點擊按鈕或按鍵，讓手做出幾種基本的 tutting 定格動作(box、90 度轉角、鎖定停頓)。用 HTML/CSS/JS 做一個可以互動的原型就好，先不用求精緻。」

嗯...看起來是個不錯的起點!

Vibe Coding 的小步快跑流程

借助 AI快速把想轉化為程式碼的核心不是"一次性把系统設計完美"，而是靠短周期回饋循環、持續驗證、修正方向。以下是小步快跑流程:

重新找到 Vibe 的節奏：從最微小的地方開始

接著我靜下心來，把我的想法與需求整理成明確的小步驟：

• 完全不靠安裝打包：使用原生 ES Module，透過 Import Maps 載入 Three.js。
• 搭建基本舞台：建立場景（Scene）、相機（Camera）、渲染器（Renderer）與基礎光線。
• 載入測試模型：固定載入官方範例的 https://threejs.org/examples/models/gltf/Xbot.glb（經典的 Mixamo 骨架）。

我把這段清晰的需求丟給 AI，反覆修正得到下列的 prompt：

# Prompt：3D Tutting 模擬器（Mixamo 骨架版）

請幫我用**原生 ES Module + Three.js**做一個單一 HTML 檔案的 3D Tutting（機械舞手勢）姿勢模擬器。

## 技術規範
- 不使用 build 工具，純瀏覽器可直接開啟的單一 `.html` 檔
- 用 `<script type="importmap">` 設定：
  - `"three"` → `https://unpkg.com/three@0.160.0/build/three.module.js`
  - `"three/addons/"` → `https://unpkg.com/three@0.160.0/examples/jsm/`
- 主邏輯用 `<script type="module">`，以標準 `import` 載入 `GLTFLoader` 與 `OrbitControls`
- 角色模型固定載入：`https://threejs.org/examples/models/gltf/Xbot.glb`（內建 Mixamo 骨架）

## 模型處理
- 用 `GLTFLoader` 非同步載入模型，載入完成前顯示 loading 畫面
- 載入後：
  - 計算 `Box3` 包圍盒，將模型置中（x/z 置中、y 貼地）
  - 依模型高度等比縮放到固定身高（例如 1.75 單位）
  - 加入地板網格（`GridHelper`）
- 用遍歷 `traverse()` + 名稱比對（`isBone && name.endsWith(...)`）找出以下 Mixamo 骨骼（不需完全符合前綴，只比對後綴即可相容不同命名習慣）：
  `Hips, Spine, Spine1, Spine2, Neck, Head, RightArm, RightForeArm, RightHand, LeftArm, LeftForeArm, LeftHand`

## 姿勢系統（重點）
- 載入完成當下，記錄每根用到的骨骼當前 `quaternion` 作為 **rest pose**
- 之後所有姿勢都是「相對 rest pose 疊加」，公式：
  `bone.quaternion = restQuat * Quaternion.fromEuler(currentDeltaXYZ)`
  （不要直接覆寫骨骼旋轉，否則會破壞模型原本的綁定姿勢）
- 每幀用線性插值（lerp，係數約 0.28）讓目前角度平滑趨近目標角度，做出俐落但不生硬的過渡
- 內建至少 8 組預設 tutting 姿勢（例如：待機、方框、King Tut、機械人、爆炸、凍結、斜切、十字），每組定義雙手的上臂/前臂/手掌角度、頭部與脊椎角度
- 提供「隨機姿勢」功能：從一組離散角度候選（如 -180/-135/-90/-45/0/45/90/135/180 的倍數）隨機組合出新姿勢，模擬 tutting 即興感
- 提供「自動播放」：可調 BPM（60–220），依節奏定時切換姿勢，並有一定機率插入隨機姿勢

## 手動微調面板（因骨架軸向可能與預設角度猜測有落差）
- 提供可收合的面板，針對每個關鍵骨骼列出 X/Y/Z（依需要的軸）角度滑桿（範圍 -180° ~ 180°）
- 滑動時即時更新對應骨骼的目標角度，並即時顯示角度數值
- 切換預設姿勢或按重置時，滑桿數值需同步更新

## 相機與互動
- 用 `OrbitControls` 讓使用者可拖曳旋轉視角、滾輪縮放（設定 min/max 距離）
- 相機初始視角要能完整看到角色全身，`target` 對準角色中段

## 視覺風格
- 深色科技感背景（近黑帶一點藍紫），搭配霧化效果（`Fog`）
- 環境光 + 主光源（白/藍白）+ 邊緣光（洋紅/粉色），營造舞台聚光的氛圍
- UI 疊加在畫面下方，半透明漸層黑底，含：
  - 播放/停止按鈕（播放中變色提示）
  - BPM 滑桿與數值顯示
  - 隨機姿勢、重置、微調面板開關按鈕
  - 一排姿勢預設按鈕，目前選中的姿勢要有高亮樣式
- 左上角顯示標題文字，右上角顯示簡短操作提示（如「拖曳旋轉視角」）
- 全部文字使用繁體中文

## 例外處理
- 模型載入失敗時，loading 文字要改成錯誤提示，並在 console 印出錯誤
- 找不到對應骨骼時該功能要優雅跳過，不要讓整支程式當掉

結果！！
按下儲存重整的瞬間一尊光影分明、帥氣的 Xbot 3D 模型，終於穩穩地直立出現在網頁中央了！
沒有複雜的環境設定，沒有看不懂的報錯，只有最純粹的程式碼和一個活生生站在眼前的 3D 角色。

Vibe Coding 的第一課：小步快跑，隨時驗證

看著螢幕上那個模型直立站在畫面的瞬間，我心裡極度興奮。
這是我在 Vibe Coding 踩到的第一坑：**不要妄想一口氣讓 AI 幫你寫出終點的樣子。**把它當成你的戰友，一次只專注解決一個小問題，那個 Vibe 的感覺自然就順起來了！後續將以本文的Prompt為基礎架構往下開發!

今晚就先聊到這，我們明天見啦！